Fun with HTML5 Canvas

建立一塊白板可以在上面畫畫

實作

繪製一塊 canvas 區域，並用2D的方式渲染整個頁面，並取得渲染的方法ctx，後續的繪圖都會是以這個物件來做

     const canvas = document.querySelector('#draw')
     const ctx = canvas.getContext('2d')
     canvas.width = window.innerWidth
     canvas.height = window.innerHeight

建立畫筆的粗細、顏色、出發點

     ctx.strokeStyle = '#BADA55'
     ctx.lineJoin = 'round'
     ctx.lineCap = 'round'

     let isDrawing = false;
     // 繪圖的起始點
     let lastX = 0;
     let lastY = 0;
     let hue = 0;
     let direction = true;

建立畫畫的方法

 function draw(e) {
   if (!isDrawing) return;
   ctx.beginPath();
   ctx.moveTo(lastX, lastY);
   ctx.lineTo(e.offsetX, e.offsetY);
   ctx.stroke();
   [lastX, lastY] = [e.offsetX, e.offsetY]
 }

監聽canvas上的滑鼠事件以得到畫筆動作

     canvas.addEventListener('mousemove', draw)
     canvas.addEventListener('mousedown', (e) => {
       isDrawing = true;
       [lastX, lastY] = [e.offsetX, e.offsetY];
     })
     canvas.addEventListener('mouseup', () => isDrawing = false);
     canvas.addEventListener('mouseout', () => isDrawing = false);

注意需要在滑鼠鬆開時重新進算起始點

動態設定筆刷顏色，可以透過hsl屬性，改變第一個參數也就是hue做到顏色變更的效果
```
 ctx.strokeStyle = `hsl(${hue},100%,50%)`;
```

動態設定筆刷大小，建立一個flag用來記錄筆刷要放大還是縮小，讓整體縮放更滑順

 let direction = true;

 function draw(e) {
     ...
   if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
     direction = !direction
   }
   if (direction) {
     ctx.lineWidth++
   } else {
     ctx.lineWidth--
   }
 }

最後透過globalCompositeOperation設定筆畫間的混合效果
```
 ctx.glovalCompositeOperation = 'multiply'
```

canvas

HTML 中的標籤是一個用於繪製圖形的HTML5元素。它提供了一個繪製2D圖形和繪製一些基本3D圖形的區域。開發人員可以使用JavaScript在元素上繪製圖形、圖表、動畫和互動性。

以下是標籤可以做的一些事情：

繪製圖形和形狀：開發人員可以使用繪製各種形狀，如線條、矩形、圓形、多邊形等。
圖表和圖形：開發人員可以使用繪製各種圖表，例如折線圖、長條圖、圓餅圖等，以可視化數據。
圖像處理：元素允許開發人員對圖像進行處理，例如裁剪、縮放、旋轉和濾鏡應用。
動畫：使用JavaScript，開發人員可以在上創建動畫。他們可以繪製多個幀以創建平滑的動畫效果。
互動性：開發人員可以監聽上的事件，例如鼠標點擊、移動和觸摸事件，以實現互動性。
遊戲開發：是HTML5遊戲開發的重要組件。它提供了繪製遊戲場景、角色和遊戲物品的能力。
繪製文本：開發人員可以使用繪製文本，並自定義字體、大小和顏色。
實時圖形：允許您不斷更新並繪製實時圖形，例如股票市場的價格圖表或即時數據視覺化。

總之，標籤是一個強大的HTML元素，可用於在網頁上創建各種視覺效果和圖形。它提供了對圖形渲染的直接控制，並允許開發人員根據需要自定義繪圖。

知識點

理解HTML中canvas的運用
Mothereffing HSL，幫助理解CSS (Cascading Style Sheets) 中的HSL顏色模型
- 色調（Hue）：指的是顏色的基本色調，以角度表示，從0度（紅色）到360度（再次是紅色，也是完全飽和的）。
- 飽和度（Saturation）：表示色彩的鮮艷度，以百分比表示，0% 表示灰色，100% 表示完全飽和的顏色。
- 亮度（Lightness）：表示顏色的亮度，以百分比表示，0% 表示黑色，100% 表示白色。
Hue的數值從0-360會輪完所有的顏色
globalCompositeOperation是 HTML5 Canvas 中的一個屬性，用於控制繪圖上下文中不同圖形之間的混合效果。它的作用是指定在將新的形狀繪製到現有內容上時，如何將新的像素數據結合（混合）到現有的內容中